<template>
  <el-card>
    <div slot="header" class="clearfix custom-header">
      <span class="f16 fb"><i class="el-icon-notebook-2 fb f18 text-blue mr5" />地区招聘数据明细表</span>
    </div>
    <div class="search-filter">
      <el-row :gutter="20">
        <el-col :span="6">
          <sitem label="地区：">
            <el-cascader slot="item" v-model="listQuery.id" :options="areaData" @change="handleFilter" />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="简历投递量：" range>
            <el-input
              slot="low"
              v-model="listQuery.reCountMin"
              oninput="value=value.replace(/[^\d]/g,'')"
              max-length="9"
              placeholder="填写整数"
              @keyup.enter.native="handleFilter"
            /><el-input
              slot="high"
              v-model="listQuery.reCountMax"
              oninput="value=value.replace(/[^\d]/g,'')"
              max-length="9"
              placeholder="填写整数"
              @keyup.enter.native="handleFilter"
            />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="反馈率（%）：" range>
            <el-input
              slot="low"
              v-model="listQuery.feedbackRateMin"
              oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
              max-length="9"
              placeholder="填写数字"
              @keyup.enter.native="handleFilter"
            /><el-input
              slot="high"
              v-model="listQuery.feedbackRateMax"
              oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
              max-length="9"
              placeholder="填写数字"
              @keyup.enter.native="handleFilter"
            />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="面试率（%）：" range>
            <el-input
              slot="low"
              v-model="listQuery.viewRateMin"
              oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
              max-length="9"
              placeholder="填写数字"
              @keyup.enter.native="handleFilter"
            /><el-input
              slot="high"
              v-model="listQuery.viewRateMax"
              oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
              max-length="9"
              placeholder="填写数字"
              @keyup.enter.native="handleFilter"
            />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="入职率（%）：" range>
            <el-input
              slot="low"
              v-model="listQuery.entryRateMin"
              oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
              max-length="9"
              placeholder="填写数字"
              @keyup.enter.native="handleFilter"
            /><el-input
              slot="high"
              v-model="listQuery.entryRateMax"
              oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
              max-length="9"
              placeholder="填写数字"
              @keyup.enter.native="handleFilter"
            />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="今日发布职位数：" range>
            <el-input
              slot="low"
              v-model="listQuery.thisDayJobCountMin"
              oninput="value=value.replace(/[^\d]/g,'')"
              max-length="9"
              placeholder="填写整数"
              @keyup.enter.native="handleFilter"
            /><el-input
              slot="high"
              v-model="listQuery.thisDayJobCountMax"
              oninput="value=value.replace(/[^\d]/g,'')"
              max-length="9"
              placeholder="填写整数"
              @keyup.enter.native="handleFilter"
            />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="本月发布职位数：" range>
            <el-input
              slot="low"
              v-model="listQuery.thisMonthJobCountMin"
              oninput="value=value.replace(/[^\d]/g,'')"
              max-length="9"
              placeholder="填写整数"
              @keyup.enter.native="handleFilter"
            /><el-input
              slot="high"
              v-model="listQuery.thisMonthJobCountMax"
              oninput="value=value.replace(/[^\d]/g,'')"
              max-length="9"
              placeholder="填写整数"
              @keyup.enter.native="handleFilter"
            />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="本年度发布职位数：" range>
            <el-input
              slot="low"
              v-model="listQuery.thisYearJobCountMin"
              oninput="value=value.replace(/[^\d]/g,'')"
              max-length="9"
              placeholder="填写整数"
              @keyup.enter.native="handleFilter"
            /><el-input
              slot="high"
              v-model="listQuery.thisYearJobCountMax"
              oninput="value=value.replace(/[^\d]/g,'')"
              max-length="9"
              placeholder="填写整数"
              @keyup.enter.native="handleFilter"
            />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem label="总职位数：" range>
            <el-input
              slot="low"
              v-model="listQuery.totalJobCountMin"
              oninput="value=value.replace(/[^\d]/g,'')"
              max-length="9"
              placeholder="填写整数"
              @keyup.enter.native="handleFilter"
            /><el-input
              slot="high"
              v-model="listQuery.totalJobCountMax"
              oninput="value=value.replace(/[^\d]/g,'')"
              max-length="9"
              placeholder="填写整数"
              @keyup.enter.native="handleFilter"
            />
          </sitem>
        </el-col>
        <el-col :span="6">
          <sitem>
            <el-button slot="item" v-waves type="primary" icon="el-icon-search" @click="handleFilter">
              搜索
            </el-button>
          </sitem>
        </el-col>
      </el-row>
    </div>

    <div class="mb15">
      <el-button type="primary" icon="el-icon-download" @click="exportExcel">
        导出
      </el-button>
    </div>
    <el-table
      ref="table"
      :data="list"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="name"
        label="地区"
        width="180"
      />
      <el-table-column
        prop="resumeCount"
        label="投递量"
        align="center"
        width="120"
      />
      <el-table-column
        label="企业的反馈率"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.feedbackRate }}%
        </template>
      </el-table-column>
      <el-table-column
        label="面试率"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.viewRate }}%
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="入职率"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.entryRate }}%
        </template>
      </el-table-column>
      <el-table-column
        prop="thisDayJobCount"
        label="今日发布职位数量"
        align="center"
        width="160"
      />
      <el-table-column
        prop="thisMonthJobCount"
        label="本月发布职位数量"
        align="center"
        width="160"
      />
      <el-table-column
        prop="thisYearJobCount"
        label="本年度发布职位数量"
        align="center"
        width="160"
      />
      <el-table-column
        prop="totalJobCount"
        label="总职位数量"
        align="center"
        width="160"
      />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      :auto-scroll="false"
      @pagination="getList"
    />
  </el-card>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import { statisticsArea, areaExportXls } from '@/api/charts'
import { exportFile } from '@/utils/export'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import store from '@/store'
import sitem from '@/components/searchItem'
export default {
  directives: { waves },
  components: {
    Pagination, sitem
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        id: [],
        reCountMin: '',
        reCountMax: '',
        feedbackRateMin: '',
        feedbackRateMax: '',
        viewRateMin: '',
        viewRateMax: '',
        entryRateMin: '',
        entryRateMax: '',
        thisDayJobCountMin: '',
        thisDayJobCountMax: '',
        thisMonthJobCountMin: '',
        thisMonthJobCountMax: '',
        thisYearJobCountMin: '',
        thisYearJobCountMax: '',
        totalJobCountMin: '',
        totalJobCountMax: ''
      },
      areaData: [],
      parms: null
    }
  },
  async created() {
    this.getList()
    // 城市数据
    if (this.$store.state.app.areaData.length === 0) {
      const res = await store.dispatch('app/getArea', 'area')
      this.areaData = JSON.parse(JSON.stringify(res.result))
      if (!this.areaData[0].label !== '全部') {
        this.areaData.unshift({ label: '全部', value: '' })
      }
    } else {
      this.areaData = JSON.parse(JSON.stringify(this.$store.state.app.areaData))
      if (this.areaData[0].label !== '全部') {
        this.areaData.unshift({ label: '全部', value: '' })
      }
    }
  },
  methods: {
    getList() {
      this.listLoading = true
      const parms = JSON.parse(JSON.stringify(this.listQuery))
      parms.id = parms.id.join(',')
      this.prams = parms
      statisticsArea(parms).then(response => {
        this.list = response.result.records
        this.total = response.result.total
        this.listLoading = false
      })
    },
    handleFilter() {
      console.log(this.listQuery)
      this.listQuery.pageNo = 1
      this.getList()
    },
    exportExcel() {
      const ids = []; const selected = this.$refs.table.selection
      selected.forEach(item => {
        ids.push(item.id)
      })
      let parms = null
      if (ids.length) {
        parms = { id: ids.join(',') }
      } else {
        parms = Object.assign({}, this.prams)
        const arr = parms.id.split(',')
        const lastId = arr[arr.length - 2]
        parms.id = lastId
      }
      areaExportXls(parms).then(response => {
        exportFile(response)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .filter-container{
      line-height: 36px;
      font-size: 14px;
      margin-bottom: 10px;
      .filter-item{
        margin-bottom: 0;
      }
    }
  .custom-header{
    line-height: 32px;
    .filter-item{
      display: inline-block;
      vertical-align: middle;
    }
  }
</style>
